<template>
    <div class="order">
        <IHeader class="header" back="true" title="订单详情"></IHeader>
        <scroller>
            <div class="header">
                <image :src="imgPath('orderimg.png')" class="headerImg"></image>
                <image :src="imgPath('home.png')" class="timeImg"></image>
                <text class="bigTitle" v-if="detail.orderStatus == 1">待付款</text>
                <text class="bigTitle" v-if="detail.orderStatus == 2">去发货</text>
                <text class="bigTitle" v-if="detail.orderStatus == 3">已发货</text>
                <text class="bigTitle" v-if="detail.orderStatus == 4">已完成</text>
                <text class="bigTitle" v-if="detail.orderStatus == 5">已取消</text>
                <text class="bigTitle" v-if="detail.orderStatus == 6">已转账</text>
            </div>
            <div class="contact">
                <div class="contact-info">
                    <text class="name">{{personInfo.consignee}}</text>
                    <text class="tel">{{personInfo.phone}}</text>
                </div>
                <div class="addr">
                    <text class="address">{{personInfo.provinceName}}{{personInfo.cityName}}{{personInfo.districtName}}{{personInfo.address}}</text>
                </div>
            </div>
            <div >
                <image :src="imgPath('pic2.png')" class="xianImg"></image>
            </div>
            <div class="xian"></div>
            <div class="store">
                <div class="store-item">
                    <div class="store-info">
                        <image :src="imgPath('home.png')" class="storeImg"></image>
                        <text class="storename">{{detail.shopsName}}</text>
                    </div>
                    <div class="good-wrap" v-for="(item) in detail.goodsList" :key="item.id" @click="pushToStoreDetail(item.goodsId)">
                        <div class="good-item">
                            <image :src="item.goodsUrl" class="goodImg"></image>
                            <div class="good-right">
                                <text class="goodname">{{item.goodsName}}</text>
                                <div class="detail-info">
                                    <div class="hebing">
                                        <div class="type">
                                            <text class="text">订购类型：</text>
                                            <text class="text" v-if="item.buyType == 1">现货</text>
                                            <text class="text" v-if="item.buyType == 2">定制</text>
                                        </div>
                                        <div class="type">
                                            <text  class="text">商品类型：</text>
                                            <text  class="text" v-if="item.goodsType == 1">样品</text>
                                            <text  class="text" v-if="item.goodsType == 2">大货</text>
                                        </div>
                                    </div>
                                    <text class="text num">X{{item.amount}}</text>
                                </div>
                                <div class="price">
                                    <div class="hebing">
                                        <div class="nowPrice" v-if="item.discountPrice">
                                            <text class="money">{{'￥' + item.discountPrice}}{{'/' + item.priceUnit ? item.priceUnit : ''}}</text>
                                        </div>
                                        <div class="nowPrice">
                                            <text class="oldmoney">{{item.discountPrice ? '原价 ￥' + item.price : item.price}}{{'/' + item.priceUnit ? item.priceUnit : ''}}</text>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="beizhu-info">
                            <text class="beizhu">备注信息</text>
                            <text class="info" v-if="detail.orderRemark">{{detail.orderRemark}}</text>
                            <text class="info" v-if="!detail.orderRemark">暂无</text>
                        </div>
                    </div>
                </div>
                <div class="xian"></div>
                <div class="order-detail">
                    <div class="bianhao">
                        <text class="storenum">订单编号：</text>
                        <text class="haoma">{{detail.orderNo}}</text>
                    </div>
                    <div class="bianhao">
                        <text class="storenum">下单时间：</text>
                        <text class="haoma">{{detail.createTime}}</text>
                    </div>
                </div>
                <div class="xianwrap">
                    <div class="xian1"></div>
                </div>
                <!--<div class="order-detail">-->
                    <!--<div class="bianhao">-->
                        <!--<text class="storenum">支付方式：</text>-->
                        <!--<text class="haoma">在线支付</text>-->
                    <!--</div>-->
                    <!--<div class="bianhao" v-if="detail.orderStatus !== 1">-->
                        <!--<text class="storenum">支付时间：</text>-->
                        <!--<text class="haoma">{{detail.payTime}}</text>-->
                    <!--</div>-->
                <!--</div>-->
                <div class="xianwrap">
                    <div class="xian1"></div>
                </div>
                <div class="order-detail">
                    <div class="bianhao">
                        <text class="storenum">运费：</text>
                        <text class="haoma">运费到付</text>
                    </div>
                    <div class="bianhao" v-if="detail.orderStatus === '3' || detail.deliveryType === '4'">
                        <text class="storenum">发货方式：</text>
                        <text class="haoma">{{detail.deliveryType}}</text>
                        <!--<text class="haoma" v-if="detail.deliveryType === '2'">自取</text>-->
                    </div>
                    <div class="bianhao" v-if="detail.orderStatus === '3' || detail.deliveryType === '4'">
                        <text class="storenum">物流编号：</text>
                        <text class="haoma">{{detail.logisticsNo}}</text>
                    </div>
                </div>
                <div class="xianwrap">
                    <div class="xian1"></div>
                </div>
                <div class="order-detail" v-if="detail.invoiceType">
                    <div class="bianhao">
                        <text class="storenum">发票类型</text>
                        <text class="haoma" v-if="invoResInfo.invoiceType == 1">纸质发票</text>
                        <text class="haoma" v-if="invoResInfo.invoiceType == 2">电子发票</text>
                    </div>
                    <div class="bianhao">
                        <text class="storenum">发票抬头</text>
                        <text class="haoma">{{invoResInfo.ein}}</text>
                    </div>
                </div>
                <div class="xian"></div>
                <div class="all">
                    <text class="tit">商品总额</text>
                    <div class="allmoney">
                        <text class="qian">￥</text>
                        <text class="qian">{{totalPrice}}</text>
                    </div>
                </div>
                <div class="really">
                    <div class="realtext">
                        <text class="real">实付款</text>
                        <text class="realmon fuhao">￥</text>
                        <text class="realmon">{{detail.actualPrice}}</text>
                    </div>
                </div>
                <div class="xianwrap">
                    <div class="xian1"></div>
                </div>
                <div class="really confirmCon">
                    <div class="realtext comfirmText">
                        <text class="confirm" v-if="detail.orderStatus == 1"  @click="tipPay()">提醒付款</text>
                        <text class="confirm pay"  v-if="detail.orderStatus == 1" @click="updatePrice">修改价格</text>
                        <text class="confirm"  v-if="detail.orderStatus == 2"  @click="goFaHuo()">去发货</text>
                        <text class="confirm"  v-if="detail.orderStatus == 3" @click="tipGet()">提醒收货</text>
                        <text class="confirm"  v-if="detail.orderStatus == 4" @click="callService">售后沟通</text>
                        <text class="confirm"  v-if="detail.orderStatus == 6" @click="confirmMoney">确认收款</text>
                    </div>
                </div>
            </div>
        </scroller>
        <Dialog  :show="dialogShow"   @close="cancel">
            <div class="content">
                <text class="company-tite">填写发货信息</text>
                <div class="company-item">
                    <text class="con">发货方式</text>
                    <input type="text" placeholder="请输入发货方式" v-model="sendType" class="company-ipt">
                </div>
                <div class="company-item">
                    <text class="con">物流单号</text>
                    <input type="text" placeholder="请输入物流单号"  v-model="wuLiuNum" class="company-ipt">
                </div>
            </div>
            <div class="footer-wrapper flex_row">
                <text class="footer-btn cancel" @click="cancel">取消</text>
                <text class="footer-btn confirm" @click="confirm">确认</text>
            </div>
        </Dialog>
        <Dialog :show="showDialog" @close="hideDialog">
            <text class="dialog-title">泳衣库暖心服务热线</text>
            <text class="phoneNumber">{{phoneNumber}}</text>
            <div class="callPhone-wrapper flex_row">
                <text class="callPhone" @click="handleCall">拨打电话</text>
            </div>
        </Dialog>
        <Dialog :show="priceDialog" @close="hidePriceDialog">
            <div class="company-item company-item">
                <input type="text" placeholder="请输入修改的价格"  v-model="updatePri" class="price-ipt">
            </div>
            <div class="footer-wrapper flex_row">
                <text class="footer-btn cancel" @click="priceCancel">取消</text>
                <text class="footer-btn confirm" @click="priceConfirm">确认</text>
            </div>
        </Dialog>
        <WxcLoading :show="loadingShow" :need-mask="needMask"></WxcLoading>
    </div>
</template>

<script>
import IHeader from '@/components/header'
import Dialog from '@/components/dialog'
import { validatenull } from '@/util/validate'
import {updateOrderData, orderDetail, searchAddress, faHuoMethod, searchInvoice, messageTip, orderFaHuo} from '@/api/order'
import Nat from 'natjs'
import { WxcLoading } from 'weex-ui'
const modal = weex.requireModule('modal')
export default {
  name: 'finishOrder',
  data () {
    return {
      detail: {},
      totalPrice: 0, // 商品总价
      fahuoTypeList: [],
      addressId: '',
      personInfo: {},
      provinceName: '',
      cityName: '',
      invoResInfo: {},
      dialogShow: false,
      updatePri: '',
      phoneNumber: '',
      needMask: true, // 显示蒙版
      loadingShow: false, // loading
      showDialog: false, // 填写发货信息弹窗
      priceDialog: false // 修改价格弹窗
    }
  },
  methods: {
    tipPay () {
      const that = this
      let param = {
        moduleType: 2,
        messageType: 9,
        pic: that.detail.goodsList[0].goodsUrl,
        name: that.detail.goodsList[0].goodsName,
        price: that.detail.actualPrice
      }
      that.loadingShow = true
      that.$api.post(messageTip, param, function (res) {
        that.loadingShow = false
        modal.toast({
          message: '提醒付款成功'
        })
      }, function () {
        that.loadingShow = false
      }, true)
    },
    goFaHuo () {
      const that = this
      that.dialogShow = true
      that.deliveryType = ''
      that.logisticsNo = ''
    },
    // 提醒收货
    tipGet () {
      const that = this
      let param = {
        moduleType: 2,
        messageType: 10,
        pic: that.detail.goodsList[0].goodsUrl,
        name: that.detail.goodsList[0].goodsName,
        price: that.detail.actualPrice
      }
      that.loadingShow = true
      that.$api.post(messageTip, param, function (res) {
        that.loadingShow = false
        modal.toast({
          message: '提醒收货成功'
        })
      }, function () {
        that.loadingShow = false
      }, true)
    },
    // 商品详情
    pushToStoreDetail (id) {
      const that = this
      that.$router.push({path: '/store/storeDetail', query: {goodsId: id}})
    },
    // 取消发货
    cancel () {
      const that = this
      that.dialogShow = false
    },
    // 确认发货
    confirm () {
      const that = this
      let params = {
        deliveryType: that.sendType,
        logisticsNo: that.wuLiuNum,
        id: that.detail.id
      }
      that.loadingShow = true
      if (that.sendType && that.wuLiuNum) {
        that.$api.post(orderFaHuo, params, function (res) {
          that.loadingShow = false
          modal.toast({
            message: '确认发货'
          })
          that.dialogShow = false
        }, function () {
          that.loadingShow = false
        })
      }
    },
    confirmMoney () { // 确认收款
      const that = this
      that.$api.post('/app/yykMallOrder/confirmReceipt?id=' + that.detail.id, {}, (res) => {
        that.$router.go(0)
      })
    },
    // 联系客服
    callService () { // 联系客服
      this.showDialog = true
      this.phoneNumber = this.detail.userPhone
    },
    hideDialog () { // 关闭对话框
      this.showDialog = false
    },
    handleCall () { // 拨打电话
      Nat.call(this.phoneNumber)
    },
    // 更改价格按钮
    updatePrice () {
      const that = this
      that.priceDialog = true
    },
    // 价格更换取消
    priceCancel () {
      const that = this
      that.priceDialog = false
    },
    hidePriceDialog () {
      this.priceDialog = false
    },
    priceConfirm () {
      const that = this
      let param = {
        id: that.detail.id,
        actualPrice: that.updatePri
      }
      that.loadingShow = true
      if (that.updatePri) {
        that.$api.post(updateOrderData, param, function (res) {
          that.loadingShow = false
          modal.toast({
            message: '修改价格成功'
          })
        }, function () {
          that.loadingShow = false
        })
      }
      that.priceDialog = false
    }
  },
  mounted: function () {
    const that = this
    that.orderId = that.$route.query.orderId
    // 订单详情接口
    that.loadingShow = true
    that.$api.get(orderDetail + '/' + that.orderId, {}, function (res) {
      that.loadingShow = false
      that.detail = res.data
      for (let i = 0; i < that.detail.goodsList.length; i++) {
        that.totalPrice += that.detail.goodsList[i].price * that.detail.goodsList[i].amount
      }
      that.addressId = res.data.addressId
      // 搜索收货地址
      that.$api.get(searchAddress + '/' + that.addressId, {}, function (addres) {
        that.personInfo = addres.data
      })
      that.$api.get(faHuoMethod, {}, function (res) {
        that.fahuoTypeList = res.data
      })
      if (!validatenull(that.detail.invoiceId)) {
        that.$api.get(searchInvoice + '/' + that.detail.invoiceId, {}, function (invoRes) {
          that.invoResInfo = invoRes.data
        })
      }
    }, function () {
      that.loadingShow = false
    })
  },
  components: {
    IHeader,
    Dialog,
    WxcLoading
  }
}
</script>

<style scoped>
    .headerImg{
        width: 750px;
        height: 150px;
        margin-top:88px;
    }
    .xian{
        width:750px;
        height:16px;
        background-color: rgb(235,235,235)
    }
    .contact{
        flex-direction: column;
        padding-top: 24px;
        padding-bottom: 24px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .contact-info{
        flex-direction: row;
        align-items: baseline;
    }
    .name{
        font-size:30px;
        color:rgb(70,70,70);
        font-weight: bold;
    }
    .tel{
        font-size:31px;
        color:rgb(70,70,70);
        margin-left:24px;
        font-weight: bold;
    }
    .addr{
        margin-top:28px;
    }
    .address{
        font-size:26px;
        color:rgb(134,134,134);
    }
    .xianImg{
        width: 750px;
        height:8px;
    }

    .store{
        flex-direction: column;
    }
    .store-item{
        padding-top:18px;
        padding-left:24px;
        padding-right:24px;
        padding-bottom:32px;
        flex-direction: column;
    }
    .store-info{
        flex-direction: row;
        align-items: center;
    }
    .storename{
        font-size:30px;
        color:rgb(134,134,134);
    }
    .storeImg{
        width:34px;
        height:34px;
        margin-right:17px;
    }
    .good-wrap{
        flex-direction: column;
    }
    .good-item{
        margin-top:20px;
        background-color: rgb(235,235,235);
        padding-top:16px;
        padding-bottom:16px;
        padding-left:16px;
        padding-right:16px;
        flex-direction: row;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .goodImg{
        width:128px;
        height:128px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-left-radius:8px;
        border-bottom-right-radius: 8px;
    }
    .detail-info{
        flex-direction: row;
        margin-top:14px;
        justify-content: space-between;
    }
    .hebing{
        flex-direction: row;
        align-items: flex-end;
    }
    .goodname{
        font-size:28px;
        font-weight:bold;
        color:rgb(70,70,70);
        lines:1;
        overflow: hidden;
        width: 520px;
        text-overflow:ellipsis;
    }
    .good-right{
        margin-left: 15px;
        flex: 1;
    }
    .type{
        flex-direction: row;
        margin-right:27px;
        align-items: center;
    }
    .text{
        font-size: 24px;
        color: rgb(134,134,134);
    }
    .num{
        position: absolute;
        right: 0;
    }
    .price{
        flex-direction: row;
        margin-top: 26px;
        justify-content: space-between;
    }
    .nowPrice{
        flex-direction: row;
        margin-right:24px;
        align-items: baseline;
    }
    .money{
        font-size:28px;
        font-weight:bold;
        color:rgb(70,70,70);

    }
    .oldmoney{
        font-size:24px;
        color:rgb(134,134,134)
    }
    .beizhu-info{
        flex-direction: row;
        margin-top:24px;
    }
    .beizhu{
        font-size:24px;
        color:rgb(134,134,134)
    }
    .info{
        font-size:24px;
        color:rgb(70,70,70);
        width: 555px;
        flex-wrap:wrap;
        margin-left:23px;
    }
    .order-detail{
        padding-left:24px;
        padding-bottom:24px;
        padding-right:24px;
        flex-direction: column;
    }
    .bianhao{
        flex-direction: row;
        margin-top:20px;
        align-items: baseline;
    }
    .storenum{
        font-size:24px;
        color:rgb(134,134,134);
        font-family: meduim;
        margin-right:20px;
        min-width: 120px;
    }
    .haoma{
        font-size: 24px;
        color: rgb(70,70,70);
        font-family: meduim;
        margin-right:24px;
    }
    .xian1{
        width: 702px;
        height: 1px;
        background-color: rgb(235,235,235);
    }
    .all{
        padding-top: 23px;
        padding-right: 23px;
        padding-left: 23px;
        padding-bottom:23px;
        flex-direction: row;
        justify-content: space-between;
    }
    .tit{
        font-size:30px;
        font-weight:bold;
        color:rgb(70,70,70)
    }
    .allmoney{
        flex-direction: row;

    }
    .qian{
        font-size: 30px;
        color: rgb(70,70,70);
    }
    .really{
        flex-direction: row;
        justify-content: flex-end;
        padding-right: 23px;
        padding-left: 23px;
        align-items: center;
        height:87px;
    }
    .realtext{
        flex-direction: row;

    }
    .real{
        font-size:26px;
        color:rgb(70,70,70);
        margin-right: 20px;
    }
    .realmon{
        font-size:36px;
        color:rgb(254,203,1)
    }
    .xianwrap{
        padding-left: 24px;
        padding-right: 24px;
        height:2px;
    }
    .realtext{
        width:704px;
        height:87px;
        line-height:87px;
        justify-content: flex-end;
        align-items: center;
        border-top-color: rgb(245,245,245);
        border-top-style: solid;
        border-top-width: 1px ;

    }
    .confirm{
        width:176px;
        height:60px;
        border-top-color: rgb(206,206,206);
        border-top-style: solid;
        border-top-width: 1px ;
        border-bottom-color: rgb(206,206,206);
        border-bottom-style: solid;
        border-bottom-width: 1px ;
        border-left-color: rgb(206,206,206);
        border-left-style: solid;
        border-left-width: 1px ;
        border-right-color: rgb(206,206,206);
        border-right-style: solid;
        border-right-width: 1px ;
        text-align: center;
        line-height: 60px;
        font-size: 24px;
        color: rgb(70,70,70);
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
        flex-direction: row;
        justify-content: center;
        border-top-left-radius: 10px;
        margin-left: 32px;

    }
    .confirmCon{
        height:98px;
    }
    .comfirmText{
        height:98px;
    }
    .timeImg{
        width:40px;
        height:40px;
        position: absolute;
        left: 27px;
        top:135px;
    }
    .bigTitle{
        position: absolute;
        left: 87px;
        top: 133px;
        color:rgb(79,105,180);
        font-weight: bold;
        font-size: 36px;
    }

    .quxiao{
        font-size: 24px;
        font-size:26px;
        color:rgb(134,134,134);
        font-family:medium
    }
    .fuhao{
        font-size: 26px;
    }
    .pay{
        background-color: rgb(43,48,64);
        color: #Fff;
    }
    .disabled{
        color:#fff;
        background-color: rgb(219,219,219);
    }
    .again{
        height: 40px;
        padding-left: 15px;
        padding-right: 15px;
        border-style: solid;
        border-color: rgb(206,206,206);
        border-width:1px;
        border-radius:10px;
        font-size:22px;
        color:rgb(70,70,70);
        line-height:40px;
        margin-left:15px;
    }
    .quxiaoCon{
        flex-direction: row;
        position: absolute;
        left: 80px;
        top: 180px;
        align-items: baseline;
    }
    .quxiao{
        font-size: 24px;
        font-size:26px;
        color:rgb(134,134,134);
        font-family:medium
    }
    .btns{
        flex-direction: row;
    }
    .flex_row {
        flex-direction: row;
    }
    .company-ipt{
        height: 40px;
        width: 308px;
        line-height: 50px;
        font-size: 28px;
        padding-left:15px;
        border-bottom-color: rgb(206,206,206);
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }
    .price-ipt {
        width: 260px;
        height: 60px;
        font-size: 18px;
        background-color: rgb(245,245,245);
    }
    .content {
        padding-left: 28px;
        padding-right:28px;
    }
    .company-item {
        margin-bottom: 20px;
        flex-direction: row;
        height: 40px;
    }
    .price-ipt {
        width: 260px;
        height: 60px;
        background-color: rgb(245,245,245);
    }
    .dialog-title {
        font-size: 28px;
        text-align: center;
        color: #464646;
        font-family: medium;
    }
    .phoneNumber {
        margin-top: 60px;
        font-size: 36px;
        font-weight: bold;
        text-align: center;
    }
    .callPhone-wrapper {
        margin-top: 50px;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
    }
    .callPhone {
        width: 278px;
        height: 50px;
        line-height: 50px;
        color: #fff;
        font-size: 28px;
        font-weight: bold;
        text-align: center;
        border-radius: 8px;
        background-color: #2b3040;
    }
    .company-item{
        flex-direction: row;
        justify-content: center;
        margin-top: 30px;
        height: 70px;
    }
    .footer-wrapper {
        margin-top: 40px;
        padding-left: 110px;
        padding-right: 110px;
        justify-content: space-between;
    }
    .footer-btn {
        width: 124px;
        height: 44px;
        border-width: 1px;
        border-style: solid;
        border-color: #2b3040;
        line-height: 44px;
        font-size: 26px;
        text-align: center;
        border-radius: 8px;
    }
    .cancel {
        color: #2b3040;
        background-color: #fff;
        width:176px;
        height:60px;
        line-height: 60px;
    }
    .confirm {
        color: #fff;
        background-color: #2b3040;
    }
    .flex_row {
        flex-direction: row;
    }
</style>
